<template>
    <div class="sign">
        <div class="btn" v-if="!state">
            <a class="login-btn" @click="identify = false;state=true">登录</a>

            <a class="sign-btn" @click="identify = true;state=true">注册</a>
        </div>
        <div class="form" v-if="state">
            <form action="" method="post">
                <label>
                    <span>手机号:</span>
                    <input type="text" v-model="user.id">

                </label>
                <label>
                    <span>密码:</span>
                    <input type="text" v-model="user.password">

                </label>
                <label v-show="identify">
                    <span>验证码:</span>
                    <input type="text" v-model="user.identCode">

                </label>
            </form>
        </div>
        <div class="post-infor" v-show="state">
            <a @click="postInfor">完成</a>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'HelloWorld',
        props: {
            msg: String
        },
        data() {
            return {
                user: {
                    id: 13011112222,
                    password: 123456,
                    identCode: 6666
                },
                identify: false,
                state: false
            }
        },
        methods:{
            postInfor(){
                console.log(this.user);
                
            }
        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .sign {
        width: 100%;
        box-sizing: border-box;
        border-bottom: 2px solid #eee;
        margin-bottom: 0.2rem;
        padding-bottom: 0.3rem;
    }

    .sign .btn {
        text-align: center;
    }

    .sign .login-btn {
        display: inline-block;
        padding: 0.2rem 0.4rem;
        /* border: 1px solid #999; */
        background: #f40;
        border: 1px solid #f40;
        color: #fff;
        margin-bottom: 0.3rem;
        margin: 0.3rem 0.2rem;
    }

    .sign .sign-btn {
        display: inline-block;
        padding: 0.2rem 0.4rem;
        border: 1px solid #999;
        margin: 0.3rem 0.2rem;

    }
    .post-infor{
        text-align: center;
    }
    .post-infor a{
        display: inline-block;
        padding: 0.2rem 0.4rem;
        background: #f40;
        color: #fff;
        border-radius: 0.1rem;
    }
    .form {
        width: 100%;
        padding: 0.2rem;
        box-sizing: border-box;
    }

    .form label {
        display: flex;
        width: 100%;
        align-items: baseline;
    }

    .form label span {
        flex: 0 0 1.1rem;
        font-size: 0.28rem;
    }

    .form input {
        display: inline-block;
        width: 70%;
        margin-bottom: 0.2rem;
        background: none;
        outline: none;
        border: 1px solid #888;
        padding: 0.15rem 0.3rem;
        border-radius: 0.2rem;
    }

    .form input::after {
        content: '';

        display: inline-block;
        width: 0.5rem;
        height: 0.5rem;
        background: #f00;
    }
</style>